<template>
	<view>
		<nav-bar title="充值" mode="setting"></nav-bar>
		<view class="recharge-container">
			<scroll-view :scroll-x="true" style="height: 300rpx; white-space: nowrap">
				<view class="recharge-item-wrap" v-for="(item, index) in dataList" :key="item.id" :class="{
                        'recharge-item-wrap-active': currentSelect == index,
                    }" @click="handleSelect(index)">
					<view class="recharge-item-count">绘本{{ item.books_num }}本</view>
					<view class="recharge-item-price-box">
						<view class="recharge-item-price"><span
								style="font-size: 13px;">￥</span>{{ parseInt(item.money) }}</view>
					</view>
					<view class="recharge-item-price-explain">相当于每本{{
                            parseFloat(item.money / item.books_num)
                        }}元</view>
				</view>
			</scroll-view>
			<view class="recharge-explain">
				<view class="txt1"><span class="zj">充值说明</span></view>
				<view class="recharge-explain-text-list">
					<view class="recharge-explain-text-item">
						1. 一经使用后，不退现金，不找零
					</view>
					<view class="recharge-explain-text-item">
						2. 同一绘本使用多次按一次计算
					</view>
				</view>
			</view>
		</view>
		<view class="content1">
			<view class="txt"><span class="zj">选择支付方式</span></view>
			<radio-group @change="radioChange">
				<view class="select_x">
					<image src="../static/zx_zf1.png" mode="widthFix" class="zx_zf1"></image>
					<view class="txt3">微信支付</view>
					<radio value="0" color="#33cc00" class="xz_zt" />
				</view>
				<view class="select_x">
					<image src="../static/zx_zf2.png" mode="widthFix" class="zx_zf1"></image>
					<view class="txt3">支付宝支付</view>
					<radio value="1" color="#33cc00" class="xz_zt" />
				</view>
			</radio-group>
		</view>
		<!-- 支付按钮 -->
		<view class="footer">
			<view class="recharge-btn" @click="toPay" v-if="dataList[currentSelect]">需支付 {{dataList[currentSelect].money}} 元</view>
		</view>

	</view>
</template>

<script>
	import NavBar from "components/NavBar";
	export default {
		components: {
			NavBar,
		},
		data() {
			return {
				currentSelect: 0,
				dataList: [],
				payType: 0,
			};
		},
		onLoad() {
			this.getDataList();
		},
		methods: {
			handleSelect(index) {
				this.currentSelect = index;
			},
			toPay() {
				uni.navigateTo({
					url: "/pages/pay?currentSelect=" + this.currentSelect,
				});
			},
			getDataList() {
				this.$u.post("get_books_top_up").then((res) => {
					this.dataList = res.data;
				});
			},
			radioChange: function(evt) {
				this.payType = evt.detail.value;
				if (evt.detail.value == 0) {

				} else {

				}
			},
			choosePay(type) {
				this.payType = type;
			}
		},
	};
</script>

<style scoped>
	.footer {
		width: 100%;
		height: 50px;
		display: table;
		background-color: #fff;
		position: fixed;
		left: 0px;
		bottom: 0px;
		box-sizing: border-box;
		z-index: -1;
	}

	.txt {
		width: 100%;
		height: 40px;
		display: table;
		box-sizing: border-box;
		padding: 0px 4%;
		font-size: 18px;
		color: #000000;
		font-weight: bold;
		line-height: 40px;
		position: relative;
		padding-top: 5px;
		padding-bottom: 5px;
		border-bottom: 0.5px solid #fdfdf0;
	}

	.txt::before {
		content: "";
		width: 70px;
		height: 6px;
		border-radius: 50px;
		position: absolute;
		left: 4%;
		bottom: 12px;
		background: linear-gradient(to right, rgba(101, 220, 80, 1), rgba(183, 248, 160, 0.5));
	}

	.txt1 {
		width: 100%;
		height: 40px;
		display: table;
		box-sizing: border-box;
		padding: 0px 0%;
		font-size: 18px;
		color: #000000;
		font-weight: bold;
		line-height: 40px;
		position: relative;
		padding-top: 5px;
		padding-bottom: 5px;
		border-bottom: 0.5px solid #fdfdf0;
	}

	.txt1::before {
		content: "";
		width: 70px;
		height: 6px;
		border-radius: 50px;
		position: absolute;
		left: 0%;
		bottom: 12px;
		background: linear-gradient(to right, rgba(101, 220, 80, 1), rgba(183, 248, 160, 0.5));
	}

	.select_x {
		width: 100%;
		box-sizing: border-box;
		padding: 0px 4%;
		height: auto;
		display: table;
		border-bottom: 0.5px solid #fdfdf0;
	}

	.xz_zt {
		width: auto;
		height: auto;
		display: table;
		float: right;
		margin-top: 10.5px;
		margin-bottom: 10.5px;
	}

	.txt3 {
		width: auto;
		height: 24px;
		display: table;
		float: left;
		font-size: 15px;
		color: #000000;
		line-height: 24px;
		margin-top: 10.5px;
		margin-bottom: 10.5px;
	}

	.zx_zf1 {
		width: 24px;
		height: 24px;
		display: table;
		float: left;
		margin-right: 10px;
		margin-top: 10.5px;
		margin-bottom: 10.5px;
	}

	.content1 {
		width: 100%;
		height: auto;
		display: table;
		background-color: #fff;
		margin-top: 10px;
	}

	page {
		background-color: rgb(253, 253, 240);
	}

	.recharge-container {
		box-sizing: border-box;
		width: 100%;
		/* padding: 40rpx; */
		margin-top: 10px;
		padding-left: 4%;
		padding-right: 4px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.recharge-item-wrap {
		position: relative;
		height: 90%;
		width: 220rpx;
		margin: 20rpx;
		border-radius: 15rpx;
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		box-shadow: 0 0 5rpx black;
		/* border: 6rpx solid rgb(0, 0, 0, 0); */
		box-shadow: 0px 0px 5px 0px #edf9dd;
	}

	.recharge-item-wrap-active {
		border: 4rpx solid rgb(51, 204, 0);
	}

	.recharge-item-count {
		font-size: 32rpx;
		font-weight: bold;
	}

	.recharge-item-price-box {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.recharge-item-price {
		font-size: 48rpx;
		color: rgb(51, 204, 0);
		margin-top: 20rpx;
	}

	.recharge-item-price-explain {
		font-size: 24rpx;
		position: absolute;
		top: -4rpx;
		left: -4rpx;
		border-radius: 20rpx;
		background: linear-gradient(to right, rgb(126, 239, 86), rgb(51, 204, 0));
		color: #fff;
		padding: 4rpx 10rpx;
		border-bottom-left-radius: 0px;
	}

	.recharge-explain {
		width: 100%;
		margin-top: 60rpx;
	}

	.recharge-explain-title {
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.recharge-explain-text-item {
		font-size: 24rpx;
		color: #aaaaaa;
		margin: 5px 0px;
	}

	.recharge-btn {
		width: 100%;
		background-color: rgb(51, 204, 0);
		text-align: center;
		font-size: 16px;
		height: 50px;
		text-align: center;
		line-height: 50px;
		color: #fff;
	}

	.pay-list {
		width: 100%;
		/* background-color: #fff; */
		margin-top: 40rpx;
	}

	.pay-item {
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
		align-items: center;
	}

	.item-left {
		display: flex;
		align-items: center;
	}

	.item-icon image {
		width: 60rpx;
		height: 60rpx;
	}

	.item-name {
		position: relative;
		top: -4rpx;
		margin-left: 20rpx;
		font-size: 32rpx;
	}

	.item-dot {
		height: 48rpx;
		width: 48rpx;
		border-radius: 50%;
		border: 2rpx solid #505050;
		text-align: center;
		color: #fff;
	}

	.item-dot-actice {
		background-color: rgb(51, 204, 0);
		border: 2rpx solid rgb(51, 204, 0);
	}
</style>
